import React from 'react';
import styles from './Header.module.css';
import logo from '../../asstes/logo.svg';
import { Layout, Typography, Input, Menu, Button, Dropdown } from 'antd';
import { GlobalOutlined } from '@ant-design/icons';
import { useHistory, useLocation, useParams, useRouteMatch } from 'react-router-dom';

export const Header: React.FC = () => {
    const history = useHistory();
    return (
        <div className={styles['app-header']}>
            <div className={styles['top-header']}>
                <div className={styles.inner}>
                    <Typography.Text>让旅游更幸福</Typography.Text>
                    <Dropdown.Button
                        style={{ marginLeft: 15}}
                        overlay={
                            <Menu>
                                <Menu.Item>中文</Menu.Item>
                                <Menu.Item>English</Menu.Item>
                            </Menu>
                        }
                        icon={<GlobalOutlined/>}
                    >
                        语言
                    </Dropdown.Button>
                    <Button.Group className={styles['button-group']}>
                        <Button onClick={() => history.push('/register')}>注册</Button>
                        <Button onClick={() => history.push('/login')}>登录</Button>
                    </Button.Group>
                </div>
            </div>
            <Layout.Header className={styles['main-header']}>
                <span onClick={() => history.push('/')}>
                     <img src={logo} alt="" className={styles['app-logo']}/>
                     <Typography.Title level={3} className={styles.title}>React 旅游网</Typography.Title>
                </span>
                <Input.Search placeholder={'请输入旅游目的地，主题，或关键字'} className={styles['search-input']}/>
            </Layout.Header>
            <Menu mode={'horizontal'} className={styles['main-menu']}>
                <Menu.Item key={1}>旅游首页</Menu.Item>
                <Menu.Item key={2}>周末游</Menu.Item>
                <Menu.Item key={3}>跟团游</Menu.Item>
                <Menu.Item key={4}>自由行</Menu.Item>
            </Menu>
        </div>
    )
};